<template>
    <div>
  <input type="checkbox" v-model="localCompleted" @change="toggleCompletion">
  <span :style="{textDecoration: localCompleted ? 'line-through' : 'none'}">{{ title }}</span>
  <button @click="removeTodo">删除</button>
</div>
</template>

<script>
export default {
    name: 'TodoItem',
    props: {
        title: String,
        completed: Boolean
    },
    data() {
        return {
            localCompleted: this.completed
        };
    },
    methods: {
        toggleCompletion() {
            //通过 $emit 方法向父组件发送一个 update:completed 事件
            this.localCompleted = !this.localCompleted;
            this.$emit('update:completed', this.localCompleted);
        },
        removeTodo() {
            //通过 $emit 方法向父组件发送一个 remove-todo 事件
            this.$emit('remove-todo');
        }
    }
}
</script>


<style scoped></style>